<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-bundle.css" />
    <script src="./swiper-bundle.js"></script>
    <script src="../../三段/3段考试/jquery.js"></script>
    <style>
      html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 500px;
            height: 500px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper-pagination-custom {
            top: -13;
            right: 470px;

        }

        .swiper-pagination-custom ul {

            width: 200px;
            height: 500px;
            background: rgba(0, 0, 0, 0.492);
        }

        .swiper-pagination-custom li {
            list-style: none;
            width: 200px;
            height: 80px;
            line-height: 60px;
        }

        .swiper-pagination-custom li:hover {
            font-size: 25px;
            color: coral;
        }
    </style>
  </head>
  <body>
    <div class="swiper mySwiper ">
        <div class="swiper-wrapper" id="swiper-wrapper-8264e94e562126b8" aria-live="polite">
        </div>

        <span class="notification" aria-live="assertive" aria-atomic="true"></span>
    </div>

    <div class="swiper-pagination-custom">
        <ul class="pagination">
            <li class="nav-item active">太空人</li>
            <li class="nav-item">星际战舰</li>
            <li class="nav-item">急速跑车</li>
            <li class="nav-item">动漫小姑娘</li>
            <li class="nav-item">速度与激情</li>
            <li class="nav-item">气质美女</li>
        </ul>
    </div>
  </body>
  <script>
    var swiper = new Swiper(".mySwiper", {
            direction: "vertical",
            pagination: {
                type: 'custom',
                el: ".custom-pagination",
                clickable: false,
                // 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
                renderCustom: function (swiper, current, total) {
                    //   console.log(current);//1 2 3 4

                    // 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
                    $('.custom-pagination').children().eq(current - 1).addClass('active').siblings()
                        .removeClass('active');

                    // 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
                    $('.custom-pagination').on('mouseover', 'li', function () {
                        swiper.slideToLoop($(this).index(), 1000, false)
                    })
                }
            },
    });

        $.ajax({
          url: "https://liu.zzgoodqc.cn/banner",
          type: "GET",
          dataType: "json",
          success: function (res) {
            console.log(res);
            var str = "";
            for (let i in res.data) {
              str += `<div class="swiper-slide" style="height: 491px;"><img style="height: 300px;" src="${res.data[i].img}" alt="" /></div>`
            }

            swiper.appendSlide(str)
            
          },
        })

  </script>
</html>
